<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{/webjars/jquery/3.2.1/dist/jquery.min.js}"></script>
    <script>
        function checkName(name) {
            ctxPath='[[@{/}]]';//根路径
            var url =ctxPath+"emps/count/"+name;
            var params={};
            $.get(url,params,function (data) {
                if(data.data>0){
                    $("#checkNamesRs").html("该名称已经被占用");
                } else {
                    $("#checkNamesRs").html("该名称可以使用");
                }
            });
        }
    </script>

</head>
<body>

    <form th:action="@{/emps}" th:object="${emp}" method="post">
        <div th:if="${emp.id == null}">
            <h1>新增员工</h1>
        </div>
        <div th:if="${emp.id != null}">
            <h1>修改员工</h1>
            <input type="hidden" name="_method" value="PUT">
            <input type="hidden" th:field="*{id}">
        </div>


        <p>姓名:
            <input type="text" th:field="*{name}" onblur="checkName(this.value)">
            <span id="checkNamesRs"></span>
        </p>
        <p>性别:
            <span th:each="sex:${sexs}">
                <input type="radio" th:field="*{sex}" th:value="${sex.key}">
                <span th:text="${sex.value}"></span>
            </span>
        </p>
        <p>年龄:<input th:field="*{age}" type="text"></p>
        <p>工资:<input th:field="*{sal}" type="text"></p>
        <p>生日:<input th:field="*{birthday}" type="text"></p>
        <p>职位:
            <select th:field="*{jobDesc}">
                <option th:each="job:${jobs}" th:value="${job.key}">
                    <span th:text="${job.value}"></span>
                </option>
            </select>
        </p>
        <button>保存</button>
    </form>
</body>
</html>